<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 定义一个事件func，绑定 show方法，就可以把父组件里的方法传给子组件 -->
        <!-- v-on: 可以简写为 @-->
        <com2 v-on:func123="show"></com2>
    </div>

    <template id="teml">
        <div style="background-color: antiquewhite;">
            <h1>这是子组件</h1>
            <input type="button" @click="myclick" value="这是子组件中的按钮-点击它，触发父组件传递过来的方法">
        </div>
    </template>

    <script>
        var com2 = {
            template: '#teml',
            data:function(){
                return{
                    c_user : {id:1, name:'xiaoming'}
                }
            },
            methods:{
                myclick(){
                    // emit: 触发
                    // 触发父组件里传过来的func访求
                    // 第二个参数，第三个参数...函数执行时的形参
                    //this.$emit('func123', 123, 456)

                    // 也可以通过调用父组件方法的方式，把子组件里的数据传递给父组件
                    this.$emit('func123', this.c_user);
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                p_user:null
            },
            methods: {
                show(pdata) {
                    //console.log('调用了父组件身上的方法' + arg1, ',' + arg2);
                    this.p_user = pdata;
                    console.log(this.p_user);
                },
            },
            components: {
                com2: com2
            }
        });
    </script>
</body>
</html>